require("../../assets/css/index.less");
require("./new-home.less");
require("../../assets/fonts/iconfont.css");
let dom = require("../../utils/dom.js");
let https = require("../../utils/https.js");
let local = require("../../utils/local.js");
const axios = require("axios");
let weui = require("../../assets/lib/weui/weui.js");
require("../../assets/lib/weui/weui.css");
dom.isLogin();
// 交互
// 头像上传
dom.ready(function () {
  //定义全局变量
  let imgUrl;
  let sex;
  let birthday;
  let proId;
  let ciId;
  //跳转页面
  dom.jump("#header-icon", "myhome");

  //回填数据功能---把本地用户数据,先填写到个人资料修改页
  function rander() {
    //1.获取本地用户信息
    let { imgUrl, nickName, gender, birthday, provinceId, cityId, sign } =
      local.get("user");

    // https.BASE_URL + "/portrait/1679817844887.cat.jpg";
    //2.渲染后面数据到页面----注意,如果没有数据如何处理
    dom.getEle("#avatarpic").src = https.BASE_URL + imgUrl;

    //头像默认值
    imgUrl = imgUrl;
    dom.getEle(".nickTxt").value = nickName;
    dom.getEle(".showPicker").innerHTML = gender == 0 ? "男" : "女";
    sex = gender;

    dom.getEle(".showBirthday").innerHTML = birthday;
    birthday = birthday;
    //省份和城市功能实现
    getAddress(provinceId, cityId).then((res) => {
      dom.getEle(".showProvince").innerHTML = res[0].name;
      proId = {
        value: res[0].id,
        label: res[0].name,
      };
      dom.getEle(".showCity").innerHTML = res[1].name;
      ciId = {
        value: res[1].id,
        label: res[1].name,
      };
    });

    dom.getEle("#numbox").value = sign;
  }

  async function getAddress(proId, cId) {
    let pId = await axios.get(https.BASE_URL + "/api/shared/province");
    let pArr = pId.data.data.filter((v) => {
      return v.id == proId;
    });

    let ccId = await axios.get(
      https.BASE_URL + "/api/shared/city?provinceId=" + pArr[0].id
    );
    let cArr = ccId.data.data.filter((v) => {
      return v.id == cId;
    });
    return [...pArr, ...cArr];
  }
  //当网页加载时调用
  rander();
  //上传头像
  //1.注册input的change事件
  dom.getEle("#headfile").addEventListener("change", function () {
    https.upLoadFile(
      "/api/shared/uploadPortrait",
      "file",
      this.files[0],
      function (res) {
        console.log(imgUrl);
        if (res.errno == 0) {
          console.log(res.data.url);
          dom.getEle("#avatarpic").src = https.BASE_URL + res.data.url;
          //保存用户上传的头像
          imgUrl = res.data.url;
        }
      }
    );
  });

  //选择性别
  dom.addEvent(".showPicker", function () {
    //语法: weui.picker()
    weui.picker(
      [
        {
          label: "男",
          value: 0,
        },
        {
          label: "女",
          value: 1,
        },
      ],
      {
        onConfirm: (result) => {
          dom.getEle(".showPicker").innerHTML = result[0].label;
          sex = result[0].value;
        },
        title: "请选择性别",
      }
    );
  });

  //生日选择
  dom.addEvent(".showBirthday", function () {
    weui.datePicker({
      start: 1900,
      end: new Date().getFullYear(),
      onConfirm: (result) => {
        dom.getEle(".showBirthday").innerHTML = result
          .map((v) => {
            return v.value < 10 ? "0" + v.value : v.value;
          })
          .join("-");
      },
      title: "请选择生日",
    });
  });

  //选择省份

  dom.addEvent(".showProvince", function () {
    //发送ajax-弹出省份
    https.get("/api/shared/province", function (res) {
      // console.log(res);
      //判定
      if (res.errno == 0) {
        console.log(res.data);
        //处理数据格式
        let proData = res.data.map((v) => {
          return {
            label: v.name,
            value: v.id,
          };
        });
        //弹出框效果
        weui.picker(proData, {
          onConfirm: (result) => {
            dom.getEle(".showProvince").innerHTML = result[0].label;
            //保存省份id
            proId = result[0];
          },
          title: "请选择省份",
        });
      }
    });
  });

  //选择城市

  dom.addEvent(".showCity", function () {
    let that = this;
    //判定 proId是否有值,有值才发ajax

    if (proId) {
      //发送ajax-弹出省份
      https.get("/api/shared/city?provinceId=" + proId.value, function (res) {
        // console.log(res);
        //判定
        if (res.errno == 0) {
          console.log(res.data);
          //处理数据格式
          let proData = res.data.map((v) => {
            return {
              label: v.name,
              value: v.id,
            };
          });
          //弹出框效果
          weui.picker(proData, {
            onConfirm: (result) => {
              dom.getEle(".showCity").innerHTML = result[0].label;
              ciId = result[0];
            },
            title: "请选择城市",
          });
        }
      });
    } else {
      // alert('请先选择省份')
      weui.alert("请先选择省份");
      // weui.toast('请先选择省份', 3000);
    }
  });

  //个人简介
  dom.addEvent(
    "#numbox",
    function () {
      //1.获取当前用户输入字符的长度
      let len = dom.getEle("#numbox").value.length;
      //3.判定
      if (len > 200) {
        this.value = dom.getEle("#numbox").value.slice(0, 200);
      } else {
        //2.设置到signNum上
        dom.getEle("#innum").innerHTML = len;
      }
    },
    "input"
  );

  //保存功能
  dom.addEvent("#submit", function () {
    console.log(">>>>>>", imgUrl);
    https.post(
      "/api/user/changeInfo",
      {
        imgUrl: imgUrl,
        nickName: dom.getEle(".nickTxt").value || "佚名",
        gender: sex || 0,
        birthday: dom.getEle(".showBirthday").innerHTML,
        provinceId: proId.value,
        cityId: ciId.value,
        sign: dom.getEle("#numbox").value || "什么都没有留下~~~",
      },
      function (res) {
        //判定
        if (res.errno == 0) {
          local.set("t_k", res.data.token);
          location.href = "myhome.html";
        } else {
          weui.alert(res.message);
        }
      }
    );
  });
});
